<template>
  <div id="content">
    <van-nav-bar
      title="宠物领养"
      left-arrow
      :border="false"
      @click-left="$router.push('/message')"
    />

    <div class="content">
      <van-cell title="宠物名称:" :value="`${petMessage.title}`" />
      <van-cell title="宠物年龄:" :value="`${petMessage.age}`" />
      <van-cell title="宠物性别:">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #default>
          {{ petMessage.sex == 0 ? "男孩" : "女孩" }}
        </template>
      </van-cell>
      <van-cell title="宠物状态:">
        <template #default>
          <van-tag plain type="danger" v-if="petMessage.label.split(',')[0]">{{
            petMessage.label.split(",")[0]
          }}</van-tag>
          <van-tag plain type="danger" v-if="petMessage.label.split(',')[1]">{{
            petMessage.label.split(",")[1]
          }}</van-tag>
          <van-tag plain type="danger" v-if="petMessage.label.split(',')[2]">{{
            petMessage.label.split(",")[2]
          }}</van-tag>
          <van-tag
            plain
            type="danger"
            v-if="petMessage.label.split(',')[3]"
          ></van-tag>
        </template>
      </van-cell>
      <van-cell title="地址:" :value="`${petMessage.area}`" />
      <!-- <van-cell title="用户名称:" :value="`${petMessage.uname}`" /> -->
      <van-cell title="用户名称">
        <template #default>
          <van-field
            class="firstcell"
            input-align="right"
            placeholder="请输入姓名"
            error-message-align="right"
            :border="false"
            v-model="uname"
          />
        </template>
      </van-cell>
      <van-cell title="用户性别:">
        <template #default>
          <div ref="sex2" @click="sex2()">男神</div>
          <div ref="sex3" @click="sex3()">女神</div>
        </template>
      </van-cell>
      <van-cell title="联系方式">
        <template #default>
          <van-field
            name="用户名"
            class="firstcell"
            input-align="right"
            placeholder="请输入手机号"
            error-message-align="right"
            :border="false"
            v-model="phone"
          />
        </template>
      </van-cell>

      <van-button type="danger" @click="onSub">我要领养</van-button>
    </div>
  </div>
</template>

<script>
import { getSingleRe } from "@/api/recommend";
import { Toast } from "vant";
import { myadoption } from "@/api/myadoption";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 接收路由参数
      pid: this.$route.params.rid,
      showPicker: false,
      // 宠物信息
      petMessage: "",
      // 宠物状态
      petStatus: "",
      nid: this.$route.params.nid,

      //  性别
      usex: "",

      uname: "",
      // 联系方式
      phone: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/message");
    },

    sex2() {
      this.$refs.sex2.style.color = "red";
      this.$refs.sex2.style.borderColor = "red";
      this.$refs.sex3.style.color = "#5e5e5e";
      this.$refs.sex3.style.borderColor = "white";
      this.usex = parseInt("0");
    },
    sex3() {
      this.$refs.sex3.style.color = "red";
      this.$refs.sex3.style.borderColor = "red";
      this.$refs.sex2.style.color = "#5e5e5e";
      this.$refs.sex2.style.borderColor = "white";
      this.usex = parseInt("1");
    },

    // 获取推荐信息
    getSingleMessage() {
      getSingleRe({ pid: this.pid }).then(res => {
        for (let index = 0; index < res.data.message.length; index++) {
          if (res.data.message[index].pid == this.pid) {
            this.petMessage = res.data.message[index];
          }
        }
        console.log(1312313211231213132);
        console.log(res);
      });
    },

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.push("/pet");
    },
    async onSub() {
      myadoption({
        uid: this.$store.state.user.uid,
        uname: this.$store.state.user.uname,
        phone: this.$store.state.user.phone,
        usex: this.usex,
        npid: this.petMessage.pid,
        nickname: this.petMessage.title,
        status: this.petMessage.label,
        age: this.petMessage.age,
        sex: this.petMessage.sex,
        area: this.petMessage.area,
        imgname: this.petMessage.imgname,
      }).then(res => {
        console.log(res);
        if (res.data.status != 200) {
          return Toast.fail({ message: res.data.message });
        } else {
          Toast.success({ message: "领养成功!" });
          this.$router.push("/Pet");
        }
      });
    },
  },

  mounted() {
    console.log(this.pid);
    this.getSingleMessage();
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
#content {
  margin-top: 50px;
  //   background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  .van-nav-bar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0px;

    ::v-deep .van-icon {
      color: black;
    }
    ::v-deep .van-nav-bar__title {
      font-weight: bold;
      font-family: "黑体";
    }
  }

  .content {
    width: 90%;
    height: 700px;
    margin: 0 auto;
    font-family: "黑体";

    .van-form {
      .title {
        font-size: 16px;
        padding: 0;
      }
      .firstcell {
        margin-top: 10px !important;
      }
      .van-cell {
        // background: greenyellow;
        margin-top: 15px;
        padding: 0;
        border-bottom: 1px solid #878787;
        height: 32px;

        &:focus-within {
          border-bottom: 1px solid #ffc70b !important;
          // background: red;
        }
      }
      .van-row {
        margin-top: 15px;

        .van-col {
          font-size: 14px;
        }
        .van-col:last-child {
          margin-top: -5px;
        }
      }
    }
  }
  .van-cell:nth-child(7) {
    .van-cell__value {
      display: flex;
      justify-content: space-between;

      div {
        &:first-child {
          margin-left: 10px;
        }
        font-size: 14px;
        text-align: center;
        margin-right: 25px;
        width: 60px;
        height: 28px;
        line-height: 28px;
        background: #f6f6f6;
        border-radius: 10px;
        color: #616161;
        border: 1px solid rgba(200, 200, 200, 0);

        &:active {
          color: red;
          border: 1px solid red;
        }
      }
    }
  }
  .van-cell:nth-child(8) {
    height: 50px;
    line-height: 44px;
  }
  ::v-deep .van-field__error-message {
    color: red !important;
    margin-top: -10px;
  }
}
.van-button {
  width: 150px;
  height: 30px;
  margin: 30px 0 0 86px;
  border-radius: 50px;
}
</style>
